<template>
	<view class="loginpage">
		
		<view class="header-img" >
			<image src="/static/image/appicon.png" mode="aspectFit"></image>
		</view>
		<!--水波动画-->
		<view class="waveWrapper">
			<view class="wave waveTop" style="background-image: url('/static/image/wave-top.png')"></view>
			<view class="wave waveMiddle" style="background-image: url('/static/image/wave-mid.png')"></view>
			<view class="wave waveBottom" style="background-image: url('/static/image/wave-bot.png')"></view>
		</view>

		<view class="logincontent">
			<view class="login-botton wechat" @click="wechatlogin">
				<image src="../../static/image/wechat.png" mode="aspectFit"></image>
				<text>使用微信登陆</text>
			</view>

			<view class="login-botton apple" @click="applelogin" v-if="showapplelogin">
				<image src="../../static/image/applelogo.png" mode="aspectFit"></image>
				<text>使用Apple登录</text>
			</view>

			<navigator url="/pages/login/phonelogin?op=login">
				<text class="otherlogin">其他方式登陆</text>
			</navigator>
		</view>

		<view class="agreement">
			<checkbox-group @change="radioChange">
				<label>
					<checkbox value="cb" color="#378aff" style="transform: scale(0.5);" />
				</label>
			</checkbox-group>
			我已阅读并同意<navigator class="font-color" url="/pages/article/index?key=registrationAgreement">《用户协议》</navigator>
			及<navigator class="font-color" url="/pages/article/index?key=privacyAgreement">《隐私政策》</navigator>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				lock: false,
				showapplelogin: false,
				isagree: false
			}
		},
		onLoad() {
			console.log('我来登陆了')
		},
		onShow() {
			this.$isLogin();
			//uni.clearStorageSync();
			//console.log(uni.getStorageInfoSync());
		},
		//监听页面返回事件
		onBackPress() {
			return true
		},
		onLoad() {
			//是否显示苹果登陆
			let sys = uni.getSystemInfoSync();
			//console.log(sys);
			if (sys.system >= "13" && sys.platform == "ios") {
				this.showapplelogin = true;
			}			
		},
		methods: {
			//
			radioChange(e) {
				console.log(e)
				let value = e.detail.value;
				if (value.length > 0) {
					this.isagree = true;
				} else {
					this.isagree = false;
				}
			},

			//苹果登陆
			applelogin() {
				if (!this.isagree) {
					this.$ShowMsg('请同意并勾选《同意协议》、《隐私政策》',null,false);
					return;
				}

				if (this.lock) {
					this.$ShowMsg('苹果正在登陆，请稍后...');
					return
				}
				//this.lock = true;

				let _that = this
				uni.login({
					provider: 'apple',
					success(res) {
						//登录成功  
						uni.getUserInfo({
							provider: 'apple',
							success(loginRes) {
								console.log(loginRes.userInfo);
								//登陆成功后获取用户信息
								_that.getUserInfos(loginRes.userInfo, '/login/apLogin')
							}
						})
					},
					fail: function(err) {
						// 登录失败  
						_that.$ShowMsg('code:' + JSON.stringify(err))
						console.log(err);
					}
				})
			},
			//微信登陆
			wechatlogin() {
				if (!this.isagree) {
					this.$ShowMsg('请同意并勾选《同意协议》、《隐私政策》',null,false);
					return;
				}
				//检测是否加锁
				if (this.lock) {
					this.$ShowMsg('微信正在登陆，请稍后...');
					return
				}
				//this.lock = true;
				let _this = this
				uni.login({
					provider: 'weixin',
					success(res) {
						console.log(res);
						//_this.names; 
						_this.getUserInfos(res.authResult, '/login/wxLogin');
					},
					fail(error) {
						console.log(error);
					}
				});
			},

			//请求用户信息
			getUserInfos(res, url) {
				//登陆成功后获取用户信息
				this.$HttRequest({
					url: url,
					param: res,
				}, 'POST', true).then((res) => {
					console.log(res)
					if (res.status === 10000) {
						this.lock = false;
						//判断是否绑定手机号
						// if (!res.data.phone) {
						// 	uni.setStorageSync('dxzk_access_token', res.data.access_token);
						// 	uni.setStorageSync('user_info', res.data.info);
						// 	uni.setStorageSync('user_phone', res.data.phone);
						// 	setTimeout(() => {
						// 		uni.navigateTo({
						// 			url: "/pages/login/phonelogin?op=bind"
						// 		});
						// 	}, 1500);
						// 	return;
						// }
						//res.data.info.lottery_app = true //(后台有数据返回时删除)
						this.$Saveinfo(res.data.access_token, res.data.info);
					} else {
						this.$ShowMsg(res.message)
					}
				}).catch((error) => {
					//异常错误
					this.$ShowMsg('statusCode：' + error);
					console.log(error);
				})
			},


			//获取设备cid
			getcid() {
				//获取设备的cid用于推送消息
				let clienttimer = setInterval(() => {
					let clientinfo = plus.push.getClientInfo();
					if (clientinfo.clientid) {
						clearInterval(clienttimer);
						console.log(clientinfo);
						// uni.showToast({
						// 	title: 'cid获取成功：'+clientinfo.clientid,
						// 	duration: 1500,
						// 	icon: "none",

						// })
						this.$HttRequest({
							url: '/setting/cid',
							param: {
								cid: clientinfo.clientid
							}
						}, 'POST').then((res) => {
							if (res.status === 10000) {

							} else {
								this.$ShowMsg(res.message)
							}
						}).catch((error) => {
							//异常错误
							this.$ShowMsg('statusCode：' + error.errMsg);
						});
					}
				}, 500);
			}
		}
	}
</script>

<style lang="scss">
	@keyframes move_wave1 {
	    0% {
	        transform: translateX(0) translateZ(0) scaleY(0.3)
	    }
	    50% {
	        transform: translateX(-25%) translateZ(0) scaleY(0.15)
	    }
	    100% {
	        transform: translateX(-50%) translateZ(0) scaleY(0.3)
	    }
	}
	
	@keyframes move_wave2 {
	    0% {
	        transform: translateX(0) translateZ(0) scaleY(0.45)
	    }
	    50% {
	        transform: translateX(-25%) translateZ(0) scaleY(0.3)
	    }
	    100% {
	        transform: translateX(-50%) translateZ(0) scaleY(0.45)
	    }
	}
	
	@keyframes move_wave {
	    0% {
	        transform: translateX(0) translateZ(0) scaleY(0.8)
	    }
	    50% {
	        transform: translateX(-25%) translateZ(0) scaleY(0.55)
	    }
	    100% {
	        transform: translateX(-50%) translateZ(0) scaleY(0.8)
	    }
	}
	
	
	
	
	.font-color {
		color: #fff;
		margin: 0 5rpx;
	}
	page{
		background-color: $uni-color-primary;
	}
	.loginpage {
		width: 100vw;
		height: 100vh;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		flex-direction: column;
		background-image: url('/static/image/loginbg.png');
		background-repeat: repeat-x;
		background-size:1rpx 100%;
		position: relative;
		.header-img {
			margin-top: 288rpx;
			border-radius: 50%;
			width: 200rpx;
			height: 200rpx;
			background-color: #fff;
			display: flex;
			justify-content: center;
			align-items: center;
			image{
				width: 130rpx;
				height: 130rpx;
			}
		}
		.waveWrapper {
		    overflow: hidden;
			width: 100%;
			height: 150rpx; 
			bottom: 40%;
			position: absolute;
			border-bottom: 1rpx solid #62a1fa; 
			.wave {
			    width: 200%;
			    height: 100%;
			    transform-origin: center bottom;
				position: absolute;
			}
			.waveTop {
				z-index: 15;
				opacity: 1;
			    background-size: 50% 85px;
				animation: move_wave1 6s linear infinite; 
			}
			.waveMiddle {
				z-index: 10;
				opacity: 0.65;
			    background-size: 50% 95px;
				animation: move_wave2 12s linear infinite; 
				
			}
			.waveBottom {
				z-index: 9;
				opacity: 0.2;
			    background-size: 50% 85px;
				animation: move_wave 25s linear infinite;
			}
		}
	

		.agreement {
			position: absolute;
			bottom: 5%;
			left: 15%;
			font-size: 25rpx;
			color: #333;
			display: flex;
			justify-content: center;
			align-items: center;
			font-weight: bold;
			image {
				width: 40rpx;
				height: 40rpx;
				margin-right: 5rpx;
			}
		}

		.otherlogin {
			font-size: 28rpx;
			color: #fff;
			text-decoration: underline;
			margin-top: 20rpx;
		}

		.login-text {
			color: #808080;
			font-size: 35rpx;
			margin: 40rpx 0;
		}

		


		.logincontent {
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			position: absolute;
			bottom: 12%;
			width: 100%;
			.login-botton {
				width: 450rpx;
				height: 100rpx;
				font-size: 30rpx;
				font-weight: bold;
				border-radius: 20rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				color: #FFFFFF;
				margin: 20rpx 0;



				image {
					width: 35rpx;
					height: 35rpx;
					margin: 0 10rpx;
					margin-right: 10rpx;
				}

			}

			.wechat {
				background: linear-gradient(rgba(14, 205, 83, 1), rgba(14, 167, 69, 1));
				border: 1px solid rgba(12, 147, 61, 1);

			}

			.apple {
				background-color: #000;
				
				image {
					width: 28rpx;
					height: 28rpx;
				}
			}
		}


	}
</style>
